
<div class="comments_detail container_wrapper">
  <div class="product">
    <a class="product-images" href="/products/detail/{{ product_detail.id}}?data_from={{data_from}}">
      <img  data-src="{{ product_detail.src }}" src="{{ 'empty_loading.png' | public_asset_abs_url }}" alt="{{product_detail.image.alt |image_alt:'product'}}" />
    </a>
    <div class="product-comment">
      <a class="comment-product-title line-clamp2" href="/products/detail/{{ product_detail.id }}?data_from={{data_from}}">{{product_detail.title}}</a>
      <div class="product-comment-fraction">
        <div class="comment-star-warp">
          {% assign score_uncheck_color = theme_config.global.product_score_uncheck_color | default:'#bbbbbb' %}
          {% assign score_selected_color = theme_config.global.product_score_selected_color | default:'#F8AD6B' %}
          {% for index in (1..5) %}
          {% include icon_block_star , width:"24",height:"24", color: score_uncheck_color %}
          {% endfor %}
          <div class="comment-star-warp-choose" id="star-progress" >
            {% for index in (1..5) %}
            {% include icon_block_star , width:"24",height:"24",color: score_selected_color %}
            {% endfor %}
          </div>
        </div>
        <span  id="star-text">{{product_detail.star}}</span>
      </div>
      {% if storeConfig.customer_comment_status == 1 %}
      <div>
      <a href="javascript:;" class="secondary_btn product-comment-btn write-comment">
        {{lang.comments_detail.write}}
      </a>
      </div>
      {% endif %}
    </div>
    <div class="product-proportion">
      <div class="product-proportion-row cursor-star"  data-value="5"  >
        <div class="product-proportion-star">
          {% for index in (1..5) %}
          {%- capture fill_color -%}
          {{theme_config.global.product_score_selected_color | default:'#F8AD6B'}}
          {%- endcapture -%}
          <svg t="1632626527998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7121" width="16" height="16">
            <path d="M512 0l122.88 352.96 389.12 2.752-300.8 238.08 118.272 380.032L512 747.392l-329.6 226.496L293.312 588.8 0.32 355.776l389.12-2.752z" fill="{{fill_color}}" p-id="7122"></path>
          </svg>
          {% endfor %}
        </div>
        <div class="product-proportion-fraction">
          <div class="product-comment-total-progress" id="star-progress-fifth" style="background-color: #FF8316;width:0%"></div>
        </div>
        <div class="product-proportion-number" id="star-fifth-text"></div>
      </div>
      <div class="product-proportion-row cursor-star"  data-value="4"  >
        <div class="product-proportion-star">
          {% for index in (1..5) %}
          {%- capture fill_color -%}
          {%- if index <= 4 -%}
            {{theme_config.global.product_score_selected_color | default:'#F8AD6B'}}
            {%- else -%}
            {{theme_config.global.product_score_uncheck_color | default:'#bbbbbb'}} 
          {%- endif -%}
          {%- endcapture -%}
          <svg t="1632626527998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7121" width="16" height="16">
            <path d="M512 0l122.88 352.96 389.12 2.752-300.8 238.08 118.272 380.032L512 747.392l-329.6 226.496L293.312 588.8 0.32 355.776l389.12-2.752z" fill="{{fill_color}}" p-id="7122"></path>
          </svg>
          {% endfor %}
        </div>
        <div class="product-proportion-fraction">
            <div class="product-comment-total-progress" id="star-progress-fourth"  style="background-color: #FF8316;width:0%"></div>
        </div>
        <div class="product-proportion-number" id="star-fourth-text" ></div>
      </div>
      <div class="product-proportion-row cursor-star"  data-value="3"  >
        <div class="product-proportion-star">
          {% for index in (1..5) %}
          {%- capture fill_color -%}
          {%- if index <= 3 -%}
            {{theme_config.global.product_score_selected_color | default:'#F8AD6B'}}
            {%- else -%}
            {{theme_config.global.product_score_uncheck_color | default:'#bbbbbb'}} 
          {%- endif -%}
          {%- endcapture -%}
          <svg t="1632626527998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7121" width="16" height="16">
            <path d="M512 0l122.88 352.96 389.12 2.752-300.8 238.08 118.272 380.032L512 747.392l-329.6 226.496L293.312 588.8 0.32 355.776l389.12-2.752z" fill="{{fill_color}}" p-id="7122"></path>
          </svg>
          {% endfor %}
        </div>

        <div class="product-proportion-fraction">
            <div class="product-comment-total-progress" id="star-progress-third"  style="background-color: #FF8316;width:0%"></div>
        </div>
        <div class="product-proportion-number" id="star-third-text" ></div>

      </div>
      <div class="product-proportion-row cursor-star"  data-value="2"  >
        <div class="product-proportion-star">
          {% for index in (1..5) %}
          {%- capture fill_color -%}
          {%- if index <= 2 -%}
            {{theme_config.global.product_score_selected_color | default:'#F8AD6B'}}
            {%- else -%}
            {{theme_config.global.product_score_uncheck_color | default:'#bbbbbb'}} 
          {%- endif -%}
          {%- endcapture -%}
          <svg t="1632626527998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7121" width="16" height="16">
            <path d="M512 0l122.88 352.96 389.12 2.752-300.8 238.08 118.272 380.032L512 747.392l-329.6 226.496L293.312 588.8 0.32 355.776l389.12-2.752z" fill="{{fill_color}}" p-id="7122"></path>
          </svg>
          {% endfor %}
        </div>
        <div class="product-proportion-fraction">
            <div class="product-comment-total-progress" id="star-progress-second"  style="background-color: #FF8316;width:0%"></div>
        </div>
        <div class="product-proportion-number" id="star-second-text" ></div>

      </div>
      
      <div class="product-proportion-row cursor-star"  data-value="1" >
        <div class="product-proportion-star">
          {% for index in (1..5) %}
          {%- capture fill_color -%}
          {%- if index <= 1 -%}
            {{theme_config.global.product_score_selected_color | default:'#F8AD6B'}}
            {%- else -%}
            {{theme_config.global.product_score_uncheck_color | default:'#bbbbbb'}} 
          {%- endif -%}
          {%- endcapture -%}
          <svg t="1632626527998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7121" width="16" height="16">
            <path d="M512 0l122.88 352.96 389.12 2.752-300.8 238.08 118.272 380.032L512 747.392l-329.6 226.496L293.312 588.8 0.32 355.776l389.12-2.752z" fill="{{fill_color}}" p-id="7122"></path>
          </svg>
          {% endfor %}
        </div>

        <div class="product-proportion-fraction">
            <div class="product-comment-total-progress" id="star-progress-first"  style="background-color: #FF8316;width:0%"></div>
        </div>
        <div class="product-proportion-number" id="star-first-text" ></div>
      </div>
    </div>
  </div>


  {% if is_mobile %}
    <div class="df-flex df-items-center filter-button df-oemdrawer-label">
      <svg t="1676972155640" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8122" width="24" height="24"><path d="M192 352m32 0l512 0q32 0 32 32l0 0q0 32-32 32l-512 0q-32 0-32-32l0 0q0-32 32-32Z" fill="#1D1F21" p-id="8123"></path><path d="M192 640m32 0l512 0q32 0 32 32l0 0q0 32-32 32l-512 0q-32 0-32-32l0 0q0-32 32-32Z" fill="#1D1F21" p-id="8124"></path><path d="M288 288m32 0l0 0q32 0 32 32l0 128q0 32-32 32l0 0q-32 0-32-32l0-128q0-32 32-32Z" fill="#1D1F21" p-id="8125"></path><path d="M608 576m32 0l0 0q32 0 32 32l0 128q0 32-32 32l0 0q-32 0-32-32l0-128q0-32 32-32Z" fill="#1D1F21" p-id="8126"></path></svg>
      <span style="margin-left: 5px;">{{lang.collections.detail.filter}}</span>
    </div>
  {% else %}
  <div class="df-hidden md:df-flex" style="margin-top: 40px;justify-content: space-between;">
    <div style="display: flex;align-items: center;">
      <div class="df-hidden md:df-flex" style="align-items: center;">
        <div class="custom-select-wrapper">
        <select class="custom-select" id="is_image">
          <option value="">{{lang.general.images}}</option>
          <option value="0">{{lang.general.all}}</option>
          <option value="1">{{lang.general.with_images |  default:'with_images'}}</option>
        </select>
        </div>
      </div>
      <div class="df-hidden md:df-flex" style="align-items: center;margin-left: 8px;">
        <div class="custom-select-wrapper">
        <select class="custom-select" id="star_eq">
          <option value="">{{lang.general.rating}}</option>
          <option value="0">{{lang.general.all}}</option>
          <option value="5" >&#9733; &#9733; &#9733; &#9733; &#9733;</option>
          <option value="4" >&#9733; &#9733; &#9733; &#9733; &#x2606;</option>
          <option value="3" >&#9733; &#9733; &#9733; &#x2606; &#x2606;</option>
          <option value="2" >&#9733; &#9733; &#x2606; &#x2606; &#x2606;</option>
          <option value="1" >&#9733; &#x2606; &#x2606; &#x2606; &#x2606;</option>
        </select>
        </div>
      </div>
    </div>
    <div class="df-hidden md:df-flex" style="align-items: center;">
      <span style="display:inline-block; margin-right: 10px;">{{ lang.general.sort_by }}</span>
      <div class="custom-select-wrapper">

      <select class="custom-select" id="sort_by">
        <option value="created-descending">Date, new to old</option>
        <option value="star-descending">Good reviews first</option>
        <option value="star-ascending">Bad rating priority</option>
      </select>
      </div>

    </div>
  </div>
  {% endif %}


  <div class="comments_detail-comment-wrap" style="margin-top: 20px;">
    {% if is_mobile %}
      <div id="comments_detail-warp-1"></div>
    {% else %}
      <div id="comments_detail-warp-2"></div>
    {% endif %}
    <a href="/comments/{{product_detail.handle}}" style="width: 100%;margin-top: 20px;" class="comment-btn main_btn">
      {{- lang.product.all_comment -}}
    </a>
  </div>
 
</div>


